<template>
  <div class="app-container">
    <el-container >
      <el-aside width="200px" :style="'height:'+ scrollerHeight+';'">
        <el-tree
          :props="elTreeProps"
          :data="treeData"
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
        <span v-if="data.relationAttrCategoryConfigCount==0" style="color: #990055;">{{ node.label }}</span>
        <span v-if="data.relationAttrCategoryConfigCount>0" style="color:green;">{{ node.label }}</span>
        <span>
          {{ data.relationAttrCategoryConfigCount }}
        </span>
      </span>
        </el-tree>
      </el-aside>
      <el-container >
        <el-main style="padding: 0px;">
          <categoryList :currentParentCategoryId.sync="currentCategoryId"></categoryList>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>


  import {getAllCategoryTree} from "../../../api/productCate";
  import categoryList from "./categoryList";
  export default {
    components: {
      categoryList
    },
    name: 'productAttrCateList',
    data() {
      return {
        currentCategoryId:null,
        treeData: [],
        elTreeProps:{
          children: 'children',
          label: 'name',
          isLeaf: 'lastNode'
        }

      }
    },
    created() {
      this.loadNode(null,null);
    },
    computed: {
      // 滚动区高度
      scrollerHeight:function() {
        return (window.innerHeight - 80) + 'px';
      }

    },
    methods: {
      loadNode(node, resolve) {
        getAllCategoryTree(null).then(response => {
          this.listLoading = false;
          this.treeData = response.data;
        });
      },
      //左侧树-开始
      //树形点击
      handleNodeClick(data) {
        this.currentCategoryId =data.id;
      }

    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>


